/* 清除所有的HTML元素边框外的区域，外边距是透明的【简称外边距  margin  】 */
*{
	margin: 0px;
}
#container{
	/* 排版布局，后期删除 */
	background-color: wheat;
}

#container #top{
	/* 排版布局，后期删除 */
	background-color: red;
	/* 设置上边框线 */
	border-top: 5px solid green;
	border-bottom: 3px solid #E9ECEF;
	/* height: 50px;
	line-height: 50px; */
	padding: 10px;
}

#container #bottom{
	/* 排版布局，后期删除 */
	background-color: black;
	/* 设置字体大小 */
	font-size: 0px;
}

#bottom #left{
	/* 排版布局，后期删除 */
	background-color: aquamarine;
	font-size: 20px;
	width: 20%;
	height: 1000px;
	/* 浮动: 通常在网页排版布局时，图文围绕的场景可使用，注意事项，浮动不是使用的越多越好，
	 使用不当会导致网页排版错乱*/
	 /*
	 ‌脱离标准文档流‌是指元素不再遵循HTML文档的默认布局方式，
	 即不再按照从左到右、从上到下的顺序排列。脱离标准文档流的元素不会占据其在标准流中的位置，
	 这可以通过几种CSS属性实现，包括浮动、绝对定位和固定定位。‌
	 */
	/* float: left; */   /*使用float网页排版会"脱离标准文档流"*/
	display: inline-block;  
	/*inline-block：将块级元素转换成行内块元素，
	既有内联元素不换行的特点又有块元素可设置(不设置宽高不会默认基于浏览器的宽度)宽高属性特点*/
}

#left #left_one ul{
	list-style: none;
	font-size: 12px;
}

#bottom #right{
	/* 排版布局，后期删除 */
	background-color: royalblue;
	font-size: 20px;
	height: 1000px;
	width: 80%;
	display: inline-block;
}